<!--  -->
<template>
  <div class="">
    <div class="myMoney classify">
      <div class="recharge one">
        <div class="money">
          总用户数
          <!-- <span class="biao1">年</span> -->
        </div>
        <div class="wire"></div>
        <div class="datapresentation">
          <span>{{ allUserCnt || 0 }}人</span>
        </div>
      </div>
      <div class="recharge tow">
        <div class="money">
          昨日新增用户
          <!-- <span class="biao2">日</span> -->
        </div>
        <div class="wire"></div>
        <div class="datapresentation">
          <div>
            <span>{{ yesterdayJoinCnt || 0 }}人</span>
          </div>
        </div>
      </div>
      <div class="recharge three">
        <div class="money">
          今日新增用户数
          <!-- <span class="biao3">日</span> -->
        </div>
        <div class="wire"></div>
        <div class="datapresentation">
          <span>{{ todayJoinCnt || 0 }}人</span>
        </div>
      </div>
    </div>

    <div class="block searchBox">
      <el-col :span="24" class="operation">
        <div class="block">
          <el-input
            v-model="inputName"
            placeholder="请输入账号名"
            class="userNameField"
          ></el-input>
          <el-date-picker
            value-format="yyyy-MM-dd"
            class="timetable"
            v-model="searchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-col>
    </div>

    <template>
      <div class="sort">
        <el-radio-group v-model="sort" @change="cutSort" :size="sortsize">
          <el-radio-button label="">默认排序</el-radio-button>
          <el-radio-button label="topUpMost">充值最多</el-radio-button>
          <el-radio-button label="consumption">消费最多</el-radio-button>
          <el-radio-button label="balance">余额最多</el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <el-col :span="24" class="exhibition">
      <div class="Thelistshows">
        <el-table :data="listData" stripe style="width: 100%">
                    <el-table-column type="index" label="序号" min-width="8%">
          </el-table-column>
          <el-table-column prop="username" label="账户名" min-width="15%">
            <template slot-scope="scope" >{{scope.row.username.slice(0,11) }}</template>
          </el-table-column>
          <el-table-column prop="pay_all" label="账户充值" min-width="10%">
            <template slot-scope="scope" >{{scope.row.pay_all }}</template>
          </el-table-column>
          <el-table-column prop="consume_all" label="账户消费" min-width="10%">
            <template slot-scope="scope" >{{scope.row.consume_all }}</template>
          </el-table-column>
          <el-table-column prop="balance" label="账户余额" min-width="10%">
            <template slot-scope="scope" >{{scope.row.balance }}</template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="25%" prop="create_time">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time.replace('T',' ').slice(0,19) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="is_active" label="状态" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.is_active == false" class="underLine">
                <span class="blockUp">已停用</span>
              </div>
              <div v-else class="startUsing">已启用</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" min-width="20%">
            <!-- <template slot-scope="operate">
                       <div v-if="operate.row.zhuangtai == false">
                        <i class="el-icon-video-play ActionIcon" @click="startUsing(operate.row.zhuangtai,operate.row.yonhuming)"></i>
                        <router-link :to="{name:'10-2',query:{keyword:operate.row.yonhuming }}">
                          <el-button type="text"><i class="el-icon-postcard ActionIcon"></i></el-button>
                        </router-link>
                        <router-view>
                        </router-view>
                      </div>
                      <div v-else>
                        <i class="el-icon-remove-outline ActionIcon" @click="forbidden(operate.row.zhuangtai,operate.row.yonhuming)"></i>
                        <router-link :to="{name:'10-2',query:{keyword:operate.row.yonhuming }}">
                          <el-button type="text"><i class="el-icon-postcard ActionIcon"></i></el-button>
                        </router-link>
                        <router-view>
                        </router-view>
                      </div>
                    </template> -->
            <template slot-scope="operate">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="operate.row.is_active ? '停用' : '启用'"
                  placement="top-start"
                >
                <!-- 启用 -->
                  <i
                    class="el-icon-video-play ActionIcon"
                    @click="
                      startUsing(operate.row.is_active, operate.row.username,operate.row.id)
                    "
                    v-if="operate.row.is_active == false"
                  ></i>
                  <i
                    class="el-icon-remove-outline ActionIcon"
                    @click="
                      forbidden(operate.row.is_active, operate.row.username,operate.row.id)
                    "
                    v-else
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="top-start"
                  content="查看"
                >
                  <router-link
                    :to="{
                      name: '10-2',
                      query: { keyword: operate.row.yonhuming }
                    }"
                  >
                    <el-button type="text"
                      ><i class="el-icon-postcard ActionIcon"></i
                    ></el-button> </router-link
                ></el-tooltip>
                <router-view> </router-view>
              </div>
            </template>
            <!-- <template>
                      <i class="el-icon-edit-outline ActionIcon"></i>
                      <i class="el-icon-postcard ActionIcon"></i>
                    </template> -->
          </el-table-column>
          <template slot="empty">
            <img
              class="data-pic"
              src="@/assets/abbdd35b6e88fafd24e25f2d37450ad.png"
              alt=""
            />
          </template>
        </el-table>
      </div>
      <!-- 移动端 -->
      <div class="Foldingbar" >
        <el-collapse accordion>
          <el-collapse-item v-for="item in listData" :key="item.id">
            <template slot="title">
              <span>用户名: &nbsp;{{ item.username }}</span>
              <span style="margin-left: 58px">
                <span v-if="item.is_active == false" class="blockUp">
                  状态: &nbsp;已禁用
                </span>
                <span v-else class="startUsing">
                  状态: &nbsp;已启用
                </span>
              </span>
            </template>
            <div>账户充值: &nbsp;{{ item.pay_all}}</div>
            <div>账户消费: &nbsp;{{ item.consume_all}}</div>
            <div>账户余额: &nbsp;{{ item.balance}}</div>
            <div>
              创建时间: &nbsp;
              <template>
                <span>{{ item.create_time }}</span>
              </template>
            </div>
            <div class="operatingButton">
              <div v-if="item.is_active == false">
                操作: &nbsp;
                <!-- 启用 -->
                <i
                  class="el-icon-video-play ActionIcon"
                  @click="startUsing(item.is_active, item.username,item.id)"
                ></i>
                <router-link to="DetailPage">
                  <el-button type="text"
                    ><i class="el-icon-postcard ActionIcon"></i
                  ></el-button>
                </router-link>
                <router-view> </router-view>
              </div>
              <div v-else>
                操作: &nbsp;
                <i
                  class="el-icon-remove-outline ActionIcon"
                  @click="forbidden(item.is_active, item.username,item.id)"
                ></i>
                <router-link :to="{
                  name:'10-2',
                  query:{keyword:item.username}
                }">
                  <el-button type="text"
                    ><i class="el-icon-postcard ActionIcon"></i
                  ></el-button>
                </router-link>
                <router-view> </router-view>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="paging">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import moment, { locales } from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      begin_time:'',
      end_time:'',
      account_name:'',
      inputName:'',
      tableData:[],   //分页数据
      sort_by:0,      //排序规则
      page_index:1,  //开始页数
      page_cnt:10,   //结束页数
      yesterdayJoinCnt:'',
      allUserCnt:'',
      todayJoinCnt:'',
      listData:[
        {
          username:'',          //账户名
          pay_all:'',           //账户充值
          balance:'',           //账户余额
          consume_all:'',       //账户消费
          is_active:'',         //激活状态
          create_time:'',       //创建时间
          id:'',
        }
      ],
      sort: "",
      tableData: [],
      kaishishu: 0,
      jieshushu: 10,
      currentPage4: 1,
      username: "",
      searchTime: [],
      newVal: "",
      oldVal: "",
      total: 0,
      catalog: 10,
      zuorixingzen: 0,
      jinrixinzen: 0,
      jinrixinzen: 0,
      zongrenshu: "",
      zhuangtai1: "",
      userNamept: "",
      CommissionRatio: "",
      userLevel: "",
      centerDialogVisible1: false,
      AddRegularUsers: false,
      qxyhm: "",
      yonhuming1: "",
      mima: "",
      chongfumima: "",
      loding:false,
      sortsize:""
    };
  },
  filters:{
    numFilter(value){
      let val=''
      if(!isNaN(value) && value !=''){
        if(value %1==0 && value!=0){//整数
          val=value+".00"
        }
        else if(value==0){
          val='0'
        }
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }else{
        val='0'
      }
      return val
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    searchTime(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal == null) {
        this.searchTime = [];
      }
    }
  },
  //方法集合
  methods: {
    cutSort(){
       //充值最多
      if(this.sort==='topUpMost'){
        this.sort_by=1,
        this.Update()
      }
      //消费最多
      if(this.sort==='consumption'){
        this.sort_by=2,
        this.Update()
      }
      //余额最多
      if(this.sort==='balance'){
        this.sort_by=3,
        this.Update()
      }
      //默认排序
      if(this.sort===''){
        this.sort_by=0,
        this.Update()
      }
    },

    //一页显示多少条
    async handleSizeChange(val) {
      this.page_cnt=val,
      this.sort_by=2;
      this.Update();
    },
    //跳到第几页
    handleCurrentChange(val) {
      this.page_index=val
      this.sort_by=2;
      this.Update();
    },
    //启用触发
    startUsing(is_active, username,id) {
      this.$confirm("此操作将启用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: 'myClass'
      })
        .then(() => {
          this.id=id;
          this.is_active=!is_active;
          this.username=username;
          this.operate();
          this.$message({
            type: "success",
            message: "启用成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消启用!"
          });
        });
    },
    // 停用触发
    forbidden(is_active, username,id) {
      this.$confirm("此操作将停用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.id=id;
          this.is_active = !is_active;
          this.username = username;
          this.operate();
          this.$message({
            type: "success",
            message: "停用成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停用!"
          });
        });
    },
    // 启用和停用接口
    async operate() {
      const [err, res] = await this.$http.request({
        url: "/activeUser",
        method: "POST",
        data: {
          username: this.username,
          is_active: this.is_active,
          user_id:this.id
        }
      });
      if (err) return;
      this.Update();
    },
    async CommissionRatioqd(yonhuming) {
      this.centerDialogVisible1 = false;
      this.$message({
        message: "修改成功",
        type: "success"
      });
      this.shiyan();
      this.Update();
    },
    async shiyan() {
      const [err, res] = await this.$http.request({
        url: "xiugaiquanxian/",
        method: "POST",
        data: {
          yonhuming: this.qxyhm,
          fanyongbili: this.CommissionRatio,
          quanxian: this.userLevel
        }
      });
      if (err) return;
    },
    //下级用户接口
    async Update() {
      let data={
        page_index:this.page_index,
        page_cnt:this.page_cnt,
        sort_by:this.sort_by,
        begin_time:this.begin_time,
        end_time:this.end_time,
        account_name:this.account_name
      }
      const [err, res] = await this.$http.request({
        url: "/agencySimpleUser",
        method: "GET",
        data
      });
      if (err) return;
      this.yesterdayJoinCnt=res.data.data.yesterdayJoinCnt
      this.allUserCnt=res.data.data.allUserCnt
      this.todayJoinCnt=res.data.data.todayJoinCnt
      this.listData=res.data.data.allAgencySimpleUser
      this.total=res.data.data.data_cnt
    },

    timeChange(time) {
      console.log(time);
      if (time == null) {
        this.searchTime = [];
      } else {
        this.searchTime = [time[0],time[1]];
      }
    },
    //点击搜索
    search() {
      this.begin_time=this.searchTime[0]
      this.end_time=this.searchTime[1]
      this.account_name=this.inputName
      this.Update();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(navigator.userAgent.match(/(iPhone|iPad|Android|ios)/i)){
      this.sortsize = 'small'
    }else{
      this.sortsize = 'medium'
    }
    this.Update();
    this.timeChange();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="stylus">
@import '../domesticconsumer.styl'
</style>
